<template>
	<view>
		<view class="tab-fixed u-p-20 u-flex u-row-between u-col-center">
			<view class="tab-item u-flex u-row-center u-col-center" :class="is_choose==1?'active':''" @click="ontab(1)">推荐</view>
			<view class="tab-item u-flex u-row-center u-col-center" :class="is_choose==2?'active':''" @click="ontab(2)">项目合作</view>
			<view class="tab-item u-flex u-row-center u-col-center" :class="is_choose==3?'active':''" @click="ontab(3)">城市经销</view>
		</view>
		<!--		<view class="tab u-m-20 u-p-20 u-flex u-row-between u-col-center" v-if="is_choose==0">-->
		<!--			<view class="tab-item u-flex u-row-center u-col-center" :class="is_yige==0?'active':''" @click="ontabs(0)">一级</view>-->
		<!--			<view class="tab-item u-flex u-row-center u-col-center" :class="is_yige==2?'active':''" @click="ontabs(2)">二级</view>-->
		<!--		</view>-->
<!--		<view  class="content u-p-l-20 u-p-r-20">-->
<!--			<view class="group-fac u-flex u-row-between u-col-center" @click="jump('/pages-user/user-factivor/project')">-->
<!--				<view class="leftgroup u-flex u-row-left u-col-center">-->
<!--					<image class="left-img" src="/static/images/user/shoucang/vedio-play.png"></image>-->
<!--					-->
<!--					<view class="right-content u-flex u-row-left u-col-center u-flex-col">-->
<!--						<view class="left-title">Python 第一节</view>-->
<!--						<view class="right u-m-t-10">-->
<!--							已购买-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
<!--			<view class="group-fac u-flex u-row-between u-col-center" @click="jump('/pages-user/user-factivor/class')">-->
<!--				<view class="leftgroup u-flex u-row-left u-col-center">-->
<!--					<image class="left-img" src="/static/images/user/shoucang/vedio.png"></image>-->
<!--					<view class="right-content u-flex u-row-left u-col-center u-flex-col">-->
<!--						<view class="left-title">Python 第二节</view>-->
<!--						<view class="right u-m-t-10">-->
<!--							已购买-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
<!--		</view>-->
		<view class="content u-p-l-20 u-p-r-20" style="margin-top: 40px!important;">
			<view class="group-fac u-flex u-row-between u-col-center" v-for="(item,index) in groupData" :key="index">
				<view class="leftgroup u-flex u-row-left u-col-center">
					<image class="left-img" :src="item.avatar"></image>
					<view class="right-content u-flex u-row-left u-col-center u-flex-col">
						<view class="left-title">{{ item.name }}</view>
						<view class="right u-m-t-10 u-flex u-row-center">
							<view class="u-m-r-10">{{item.area_text}}</view>
							<view class="u-m-r-10" v-if="is_choose!=1">{{item.mobile}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<shopro-empty v-if="groupData.length==0" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无内容~"></shopro-empty>
	
	</view>

</template>

<script>
export default {
	data() {
		return {
			is_choose:1,
			is_yige:0,
			groupData:[]
		};
	},
	onLoad() {
		this.getMygroup(1);
	},
	methods:{
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		ontab(index){
			this.is_choose = index
			this.getMygroup(this.is_choose);
		},
		ontabs(index){
			this.is_yige = index
		},
		getMygroup(){
			this.$new_http('newuser.myteam', {
				// category:0,
				// limit:10,
				// page:this.page
			}).then(res => {
				this.groupData = res.data
				// if (res.code === 1) {
				// 	this.richText = res.data;
				// }
			});
		}
	}
}
</script>

<style lang="scss">
page{
	background: #FBFAFA;
}
.tab-fixed{
	position: fixed;
	top: 0px;
	width: 100%;
	padding-top: 10px!important;
	padding-bottom: 10px!important;
	background: #fff;
	z-index: 1000;
	.tab-item{
		width: 33%;
		position:relative;
		font-size: 32rpx;
		&.active{
			color: #ED861F;
		}
		&.active::after{
			content: "";
			position:absolute;
			bottom: -20rpx;
			width: 40rpx;
			height: 10rpx;
			border-radius: 8rpx;
			background: #ED861F;
		}
	}
}
.tab{
	margin-top: 45px!important;
	.tab-item{
		width: 50%;
		position:relative;
		font-size: 32rpx;
		&.active{
			color: #ED861F;
		}
		&.active::after{
			content: "";
			position:absolute;
			bottom: -20rpx;
			width: 40rpx;
			height: 10rpx;
			border-radius: 8rpx;
			background: #ED861F;
		}
	}
}
.content{
	background: #fff;
	border-radius: 20rpx;
	margin-top: 80rpx;
	.group-fac{
		border-bottom:2rpx solid #F0F0F0 ;
		margin: 0 30rpx;
		padding: 30rpx 0rpx;
		width: 93%;
		.leftgroup{
			width: 100%;
			.left-img{
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
			}
		}
		.right-content{
			align-items: flex-start;
			.right{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color:#999;
			}
		}
		
	}
}

</style>
